<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./line.css">
  <title>线路</title>
</head>

<body>

  <div id="app">
    <div class="addLine" @click="clickShowAddLine">
      添加线路
    </div>
    <div style="position: fixed;right:0;top:0;width: 40%;">
      <!-- {{ruleForm}} -->
      <!-- {{dialogImageUrl}} -->
      {{ruleForm.DayContentList}}
      {{cropperOption}}
    </div>

    <div style="position: fixed;right:40%;top:40%;display:flex;flex-direction: column;width: 120px;">
      <draggable v-model="ruleForm.DayContentList" :options="{group:'people'}">
        <el-button v-for="(item, index) in ruleForm.DayContentList">第{{index+1}}天的内容</el-button>
      </draggable>
    </div>
    <div class="addLineBox" v-show="showAddLineBox">
      <el-form :model="ruleForm" ref="ruleForm" label-width="125px" class="demo-ruleForm" status-icon
        @submit.native.prevent>
        --------------------------- day list ------------------------------------
        <!-- form -->
        <div class="forDayListBox" v-for="(dayItem, dayItemIndex) in ruleForm.DayContentList"
          :style="dayItemIndex%2==0?'border: 1Px solid salmon;padding: 20px;position: relative':'border: 1Px solid #007ACC;padding: 20px;position: relative'">
          <el-button>第{{dayItemIndex+1}}天</el-button>
          <el-form label="描述" :model="dayItem" ref="scenicDescribe" label-width="150px" class="demo-ruleForm"
            status-icon @submit.native.prevent>
            <el-form-item label="简介" prop="scenicDescribe" :rules="rules.scenicDescribe">
              <el-input type="textarea" v-model="dayItem.scenicDescribe" show-word-limit maxlength="200"
                :autosize="{ minRows: 2, maxRows: 6}" clearable></el-input>
              {{dayItem.scenicDescribe}}
            </el-form-item>
          </el-form>
          <!-- 这是步骤盒子的布局 -->
          <div style="display: flex;align-items: center;">
            <!-- 左边是列表组可拖拽调整步骤位置 -->
            <div style="flex: 2">
              <draggable v-model="dayItem.scenicPieceStep" :options="{group:'people'}">
                <el-button v-for="(stepItem, stepIndex) in dayItem.scenicPieceStep">第{{stepIndex+1}}个步骤
                </el-button>
              </draggable>
            </div>
            <!-- 步骤内容列表 -->
            <div style="flex: 8;">
              <div v-for="(stepItem, stepIndex) in dayItem.scenicPieceStep"
                style="display: flex;align-items: center;justify-content: center;border:1PX solid saddlebrown;position: relative;">
                <el-form :model="stepItem" :ref="'step'+dayItemIndex" label-width="150px" class="demo-ruleForm"
                  status-icon @submit.native.prevent>
                  <!-- 描述线路步骤 -->
                  <el-form-item label="游玩点标题" prop="val" :rules="rules.addLineFeature">
                    <div class="lineAddStepBox" style="display: flex;align-items: center;justify-content: center;">
                      <span>{{stepIndex+1}}.</span>
                      <el-input clearable v-model="stepItem.val" show-word-limit maxlength="30">
                      </el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="游玩时长(小时单位)" prop="playDayNum" :rules="rules.playDayNum">
                    <el-input-number v-model="stepItem.playDayNum" :precision="1" :step="0.1" :min="1">
                    </el-input-number>
                    <span style="font-size: 12px;">{{stepItem.playDayNum}}小时</span>
                  </el-form-item>
                  <!-- 富文本 -->
                  <div style="border: 1px solid skyblue;margin: 5px">
                    <div style="min-height: 300px;">
                      <draggable v-model="stepItem.content" :options="{group:'people'}">
                        <div v-for="(stepCon, stepConIndex) in stepItem.content">
                          <div v-if="stepCon.type == 'text'"
                            style="border:1px dotted #cccccc;border-radius: 4px;margin: 5px;position: relative;">
                            <div style="line-height: 2"
                              @click="pointTextClick(stepCon.val, dayItemIndex, stepIndex, stepConIndex)"
                              v-html="replaceN(stepCon.val)">
                              <!-- {{}} -->
                            </div>
                            <el-popover placement="top" width="160" v-model="stepCon.IsDel">
                              <p>确定删除内容吗？</p>
                              <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text"
                                  @click="stepConCancel(dayItemIndex, stepIndex, stepConIndex)">
                                  取消
                                </el-button>
                                <el-button type="primary" size="mini"
                                  @click="stepConDel(dayItemIndex, stepIndex, stepConIndex)">
                                  确定</el-button>
                              </div>
                              <span class="el-icon-error" slot="reference"
                                style="position: absolute;top:0;right:0;color: salmon;font-size: 20px"></span>
                            </el-popover>
                          </div>
                          <div v-else style="position: relative">
                            <!-- <el-image :src="'http://'+stepCon.imgList.url"></el-image> -->
                            <el-image :src="stepCon.imgList.url"
                              @click="pointIMgClick(stepCon.imgList, dayItemIndex, stepIndex, stepConIndex)"></el-image>
                            <el-popover placement="top" width="160" v-model="stepCon.IsDel">
                              <p>确定删除内容吗？</p>
                              <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text"
                                  @click="stepConCancel(dayItemIndex, stepIndex, stepConIndex)">
                                  取消
                                </el-button>
                                <el-button type="primary" size="mini"
                                  @click="stepConDel(dayItemIndex, stepIndex, stepConIndex)">
                                  确定</el-button>
                              </div>
                              <span class="el-icon-error" slot="reference"
                                style="position: absolute;top:0;right:0;color: salmon;font-size: 20px"></span>
                            </el-popover>
                          </div>
                        </div>
                      </draggable>
                    </div>
                    <div class="btnGroup" style="display: flex;justify-content: flex-end;">
                      <el-button size='mini' type="primary" @click='stepAddText(dayItemIndex, stepIndex)'>添加文本
                      </el-button>
                      <el-button size='mini' type="primary" @click='stepAddImg(dayItemIndex, stepIndex)'>添加图片
                      </el-button>
                      <input type="file" ref="myInput" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
                        accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
                    </div>
                  </div>
                  <!-- 关联资源 -->
                  <el-form-item label="请添关联资源" prop="resource" :rules="rules.resource">
                    <el-select v-model="stepItem.resource" multiple placeholder="请选择">
                      <el-option v-for="item in optionResource" :key="item.id" :label="item.title" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <el-popover placement="top" width="160" v-model="stepItem.IsDel"
                  v-if="dayItem.scenicPieceStepNum == stepIndex || dayItem.scenicPieceStepNum != stepIndex ">
                  <p>确定删除内容吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="lineStepCancel(dayItemIndex, stepIndex)">
                      取消
                    </el-button>
                    <!--  -->
                    <el-button type="primary" size="mini" @click="stepDel(dayItemIndex, stepIndex)">
                      确定</el-button>
                  </div>
                  <span class="el-icon-error" slot="reference"
                    style="position: absolute;top:0;right:0;color: salmon;font-size: 20px"></span>
                </el-popover>
              </div>
              <el-button type="primary" size="mini" @click="lineStepAdd(dayItemIndex, stepIndex, 'step')">添加步骤
              </el-button>
              <!-- 步骤的删除 -->
            </div>
          </div>
          <el-popover placement="top" width="160" v-model="dayItem.IsDel">
            <p>确定删除内容吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="dayCancel(dayItemIndex)">
                取消
              </el-button>
              <el-button type="primary" size="mini" @click="dayDel(dayItemIndex)">
                确定</el-button>
            </div>
            <span class="el-icon-error" slot="reference"
              style="position: absolute;top:0;right:0;color: salmon;font-size: 20px"></span>
          </el-popover>
        </div>
        <!-- 描述线路步骤 -->
        <el-form-item>
          <el-button type="primary" @click="addDayData('scenicDescribe', dayItemIndex)">添加1天
          </el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 全局大图img -->
    <el-dialog :visible.sync="globalMagnify">
      <!-- <img width="100%" :src="'http://' + globalMagnifyUrl"> -->
      <img width="100%" :src="globalMagnifyUrl">
    </el-dialog>
    <!-- 富文本的text添加 -->
    <el-dialog :title="TextUtilsTitle" :visible.sync="addText" @close="handleDialogClose">
      <el-input type="textarea" v-model="globalText" show-word-limit maxlength="500" class="ssasdasdsadasd"
        :autosize="{ minRows: 1, maxRows: 10}" clearable></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="gloablTextCancel">取 消</el-button>
        <el-button type="primary" @click="gloablTextConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 富文本的img添加  -->
    <el-dialog :title="ImgUtilsTitle" :visible.sync="addImg" @close="handleDialogClose">
      <div style="width: 600px;height: 550px;">
        <vue-cropper ref="cropper" :img="cropperOption.img" :output-size="cropperOption.size"
          :output-type="cropperOption.outputType" :info="true" :full="cropperOption.full"
          :can-move="cropperOption.canMove" :can-move-box="cropperOption.canMoveBox" :fixed-box="cropperOption.fixedBox"
          :original="cropperOption.original" :auto-crop="cropperOption.autoCrop"
          :auto-crop-width="cropperOption.autoCropWidth" :auto-crop-height="cropperOption.autoCropHeight"
          :center-box="cropperOption.centerBox" @real-time="realTime" :high="cropperOption.high" @img-load="imgLoad"
          mode="cover"></vue-cropper>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="gloablImgCancel">取 消</el-button>
        <el-button type="primary" @click="gloablImgConfirm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
  <!-- 全局放大镜 -->


  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 拖拽包 -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
  <script src='./cos-js-sdk-v5.min.js'></script>
  <!-- vue图片裁剪 -->
  <script src="https://cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.min.js"></script>
  <!-- element UI -->
  <script>
    Vue.use(window['vue-cropper'])
    var Bucket = '';
    var Region = '';
    var config = {
      url: 'http://wl.fangkeng.wang/admin/'
    }


    // 初始化实例
    // var cos = new COS({
    //     SecretId: 'AKID30oTxOckfT7f5NNdfWCh196MXXLydhMv',
    //     SecretKey: 'XuAmLjwyo2DF5l3Gct00rXDPXo01FO6h',
    // });
    function http(url, method, data) {
      return new Promise((res, rej) => {
        axios({
          url,
          method,
          data
        }).then(pos => res(pos)).catch(err => rej(err))
      })
    }
    function allCheckRules(that, formName, index) {
      let result
      result = new Promise((resolve, reject) => {
        if (index) {
          that.$refs[formName][(index - 1)].validate((valid) => {
            if (valid) {
              resolve();
            } else { reject() }
          })
        } else {
          that.$refs[formName].validate((valid) => {
            if (valid) {
              resolve();
            } else { reject() }
          })
        }
      })
      return result
    }
    var cos = new COS({
      getAuthorization: function (options, callback) {
        // var url = 'http://wl.fangkeng.wang/api/test/test';
        var url = config.url + 'cosv5';
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onload = function (e) {
          try {
            var data = JSON.parse(e.target.responseText);
            Bucket = data.Bucket;
            Region = data.Region;
          } catch (e) {
          }
          callback({
            TmpSecretId: data.credentials && data.credentials.tmpSecretId,
            TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
            XCosSecurityToken: data.credentials && data.credentials.sessionToken,
            ExpiredTime: data.expiredTime,
          });
        };
        xhr.send();
      }
    });
    var checkPlayDayNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("必须输入非零数字"))
      } else {
        callback()
      }
    };
    var checkScenicImg = (rule, value, callback) => {
      if (value.length == 0) {
        return callback(new Error("必须添加至少一张图片"))
      } else {
        callback()
      }
    }
    var app = new Vue({
      el: '#app',
      data: {
        // 裁剪框配置
        cropperOption: {
          img: '',
          size: 1,
          full: false,
          outputType: 'png',
          canMove: true,
          // fixedBox为true就不能改变裁剪框
          fixedBox: false,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 200,
          autoCropHeight: 150,
          centerBox: false,
          high: true
        },
        moveState: '', // 裁剪的状态
        dayItemIndex: null, // day的index
        stepIndex: null, // 步骤的index
        contentIndex: null, // content的index
        addText: false, // 添加文本
        addImg: false, // 添加img
        textUpdata: false, // 是否修改富文本
        imgUpdata: false, // 是否修改富文本img
        TextUtilsTitle: '', // 富文本的title
        ImgUtilsTitle: '', // 富文本img的title
        globalText: '', // globalText
        globalImg: [], // globalImg
        optionResource: [{ id: 0, title: '香菜' }, { id: 1, title: '肉夹馍' }, { id: 2, title: '酸菜' }], // 关联资源 步骤里面的
        optionScenic: [{ id: 0, title: '香菜' }, { id: 1, title: '肉夹馍' }, { id: 2, title: '酸菜' }], // 关联景点的数组 外层的
        globalMagnify: false, // 是否显示全局放大镜
        globalMagnifyUrl: '', // 全局放大镜的本地url
        showAddLineBox: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        featureDotsItemAddNum: 0, //线路特色添加index
        // scenicPieceStepNum: 0, // dayList 添加步骤的index
        dayNum: 0, // day的index
        // 表单
        ruleForm: {
          DayContentList: [
            {
              scenicPieceStep: [{ val: '', IsDel: false, playDayNum: 0, content: [], resource: [] }],
              scenicDescribe: '',
              scenicPieceStepNum: 0,
              IsDel: false
            }
          ]
        },
        rules: {
          addLineFeature: [
            { required: true, message: '请输入线路步骤', trigger: ['change', 'blur'] }
          ],
          // 描述线路步骤
          scenicPieceStep: [
            { required: true, message: '请输入游玩点标题', trigger: ['change', 'blur'] }
          ],
          // 步骤的关联资源
          resource: [
            { required: false, message: '请选择关联资源', trigger: ['change', 'blur'] }
          ],
          // day的简单总描述
          scenicDescribe: [
            { required: true, message: '请输入当天的总描述', trigger: ['change', 'blur'] }
          ],
          // 游玩时长
          playDayNum: [
            { required: true, message: '请输入游玩时长', trigger: ['change', 'blur'] },
            { validator: checkPlayDayNum, trigger: ['change', 'blur'] }
          ],
          // text 添加线路景点活动描述
          scenicText: [
            { required: true, message: '请添加线路景点活动描述', trigger: ['change', 'blur'] }
          ],
          // scenicImg  添加线路景点图片
          scenicImg: [
            // { type: 'array', required: true, message: '请添加线路景点图片(1-5张)', trigger: ['change', 'blur'] },
            { validator: checkScenicImg, required: true, trigger: ['change', 'blur'] }
          ]
        }
      },
      created() {
        // this.optionScenic = pos.data.data
        // http(config.url + 'getScenic', 'POST', {}).then(pos => this.optionScenic = pos.data.data)
        // 获取资源
        http(config.url + 'getResource', 'POST', {}).then(pos => this.optionResource = pos.data.data)
      },
      methods: {
        // 替换换行
        replaceN(str) {
          if (str) {
            console.log(str.replace('/\n', '\\n'))
            return str.replace(/\n/g, '<br>')
          }
        },
        imgLoad(msg) {
          console.log(msg)
        },
        realTime(data) {
          this.moveState = data
        },
        // input的弹出
        uploadImg(e, num) {
          //上传图片
          // this.option.img
          var file = e.target.files[0]
          if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
            alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
            return false
          }
          var reader = new FileReader()
          reader.onload = (e) => {
            console.log(e, 'reader.onload = (e)')
            let data
            if (typeof e.target.result === 'object') {
              // 把Array Buffer转化为blob 如果是base64不需要
              data = window.URL.createObjectURL(new Blob([e.target.result]))
            } else {
              data = e.target.result
            }
            if (num === 1) {
              this.cropperOption.img = data
            } else if (num === 2) {
              this.example2.img = data
            }
          }
          // 转化为base64
          // reader.readAsDataURL(file)
          // 转化为blob
          reader.readAsArrayBuffer(file)
          this.addImg = true
          this.ImgUtilsTitle = '添加图片'
        },
        // 富文本img的修改
        pointIMgClick(url, dayItemIndex, stepIndex, stepConIndex) {
          console.log(url, dayItemIndex, stepIndex, stepConIndex)
          this.cropperOption.img = url.url
          let arr = []
          this.ImgUtilsTitle = '修改图片'
          this.imgUpdata = true
          this.contentIndex = stepConIndex
          this.addImg = true
          arr.push(url)
          this.globalImg = arr
        },
        // 富文本文本点击修改
        pointTextClick(text, dayItemIndex, stepIndex, stepConIndex) {
          this.TextUtilsTitle = '修改文本'
          this.textUpdata = true
          this.contentIndex = stepConIndex
          this.addText = true
          this.globalText = text
        },
        handleDialogClose() {
          this.imgUpdata = false
          this.globalText = ''
          this.globalImg = []
        },
        // 步骤删除
        stepDel(dayItemIndex, stepIndex) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep
          list.splice(stepIndex, 1)
        },
        // 添加的img按钮
        stepAddImg(dayItemIndex, stepIndex) {
          this.$refs.myInput[0].value = ''
          document.getElementById('uploads').click()
          console.log(this.cropperOption.img, 'this.cropperOption.img')
          this.dayItemIndex = dayItemIndex
          // this.ImgUtilsTitle = '添加图片'
          this.stepIndex = stepIndex
          // this.addImg = true
          // console.log(this.ImgUtilsTitle)
        },
        // 步骤中的内容删除
        stepConDel(dayItemIndex, stepIndex, stepConIndex) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep[stepIndex]
          list.content.splice(stepConIndex, 1)
        },
        // 步骤中的内容取消
        stepConCancel(dayItemIndex, stepIndex, stepConIndex) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep[stepIndex]
          list.content[stepConIndex].IsDel = false
        },
        // 添加的text按钮
        stepAddText(dayItemIndex, stepIndex) {
          this.TextUtilsTitle = '添加文本'
          this.dayItemIndex = dayItemIndex
          this.stepIndex = stepIndex
          this.addText = true
        },
        //  弹框的img取消
        gloablImgCancel() {
          this.addImg = false
          this.imgUpdata = false
          this.globalImg = []
        },
        // 弹框的img确认
        gloablImgConfirm() {
          console.log(this.cropperOption.img, 'this.cropperOption.img')
          let list = this.ruleForm.DayContentList[this.dayItemIndex].scenicPieceStep[this.stepIndex]
          let obj = { imgList: {}, type: 'img', IsDel: false }

          this.cropperOption.img = ''
          if (this.imgUpdata) {
            // 修改图片
            this.$refs.cropper.getCropBlob((data) => {
              var img = window.URL.createObjectURL(data)
              list.content[this.contentIndex].imgList.url = img
              // http(config.url + 'cosv5', 'POST', {}).then(pos => {
              //   Bucket = pos.data.Bucket
              //   Region = pos.data.Region
              //   this.uploadImgFn(img, Bucket, Region)
              // }).catch(err => {
              //   console.log(err)
              // })
              this.addImg = false
            })
            this.imgUpdata = false
          } else {
            this.$refs.cropper.getCropBlob((data) => {
              var img = window.URL.createObjectURL(data)
              obj.imgList.url = img
              list.content.push(obj)
              http(config.url + 'cosv5', 'POST', {}).then(pos => {
                Bucket = pos.data.Bucket
                Region = pos.data.Region
                this.uploadImgFn(img, Bucket, Region).then(res => {
                  obj.imgList.url = 'https://' + res.Location
                  list.content.push(obj)
                  console.log(res, 'res')
                }).catch(reserr => {
                  console.log(reserr, 'reserr')
                })
              }).catch(err => {
                console.log(err)
              })
              this.addImg = false
            })
          }
        },
        // 弹框的text确认
        gloablTextConfirm() {
          let obj = { val: '', type: 'text', IsDel: false }
          this.addText = false
          let list = this.ruleForm.DayContentList[this.dayItemIndex].scenicPieceStep[this.stepIndex]
          if (this.textUpdata) {
            // 修改文本
            list.content[this.contentIndex].val = this.globalText
            this.textUpdata = false
          } else {
            if (this.globalText !== '') {
              obj.val = this.globalText
              list.content.push(obj)
            }
          }
          this.globalText = ''
        },
        // 弹框的text取消
        gloablTextCancel() {
          this.addText = false
          this.globalText = ''
        },
        // day 取消
        dayCancel(index) {
          this.ruleForm.DayContentList[index].IsDel = false;
        },
        // day 删除
        dayDel(index) {
          if (this.ruleForm.DayContentList.length > 1) {
            this.ruleForm.DayContentList.splice(index, 1)
            this.dayNum--
          }
        },
        // 添加每天的数据
        addDayData(formName, dayItemIndex) {
          console.log(this.$refs)
          const obj = {
            scenicPieceStep: [{ val: '', IsDel: false, playDayNum: 0, content: [], resource: [] }],
            IsDel: false,
            scenicDescribe: '',
            scenicPieceStepNum: 0
          }
          let arr = []
          let that = this
          arr.push(allCheckRules(that, 'ruleForm'))
          this.ruleForm.DayContentList.map((item, index) => {
            arr.push(allCheckRules(that, 'scenicDescribe', (index + 1)))
            item.scenicPieceStep.map((iitem, iindex) => {
              arr.push(allCheckRules(that, 'step' + index, (iindex + 1)))
            })
          })
          Promise.all(arr).then(function () { //都通过了
            that.dayNum++
            that.ruleForm.DayContentList.push(obj)
          }).catch((err) => {
            this.$message({ message: '请填写完整信息', type: 'warning' })
            console.log("err");
          })
        },
        clickShowAddLine() {
          this.showAddLineBox = true
        },
        submitForm(formName) {
          console.log(this.$refs)
          let arr = []
          let that = this
          arr.push(allCheckRules(that, 'ruleForm'))
          this.ruleForm.DayContentList.map((item, index) => {
            arr.push(allCheckRules(that, 'scenicDescribe', (index + 1)))
            item.scenicPieceStep.map((iitem, iindex) => {
              arr.push(allCheckRules(that, 'step' + index, (iindex + 1)))
            })
          })
          let data = this.ruleForm.DayContentList
          Promise.all(arr).then(function () { //都通过了
            alert('yes')
            data.map((item, index) => {
              item.title = `第${index + 1}天`
            })
            console.log(that.ruleForm)
          }).catch((err) => {

            console.log("err", this.ruleForm.thumb);
            this.$message({ message: '请填写完整信息', type: 'warning' })
          })
        },
        // 步骤添加
        lineStepAdd(dayItemIndex) {
          console.log(this.$refs, dayItemIndex)
          const obj = { val: '', IsDel: false, playDayNum: 0, content: [], resource: [] }
          let list = this.ruleForm.DayContentList[dayItemIndex]
          let that = this
          let arr = []
          if (list.scenicPieceStep.length != 0) {
            this.ruleForm.DayContentList.map((item, index) => {
              item.scenicPieceStep.map((iitem, iindex) => {
                arr.push(allCheckRules(that, 'step' + index, (iindex + 1)))
              })
            })
            Promise.all(arr).then(function () { //都通过了
              list.scenicPieceStep.push(obj)
            }).catch((err) => {
              console.log("err");
              this.$message({ message: '请填写完整信息', type: 'warning' })
            })
          } else {
            list.scenicPieceStep.push(obj)
          }
        },
        // 步骤取消
        lineStepCancel(dayItemIndex, stepIndex) {
          let list = this.ruleForm.DayContentList[dayItemIndex].scenicPieceStep[stepIndex]
          list.IsDel = false
        },

        uploadImgFn(imgUrl, Bucket, Region) {
          return new Promise((res, rej) => {
            cos.sliceUploadFile({
              Bucket,
              Region,
              // Key: 'images/' + new Date().getTime(),
              Key: 'images/',
              Body: imgUrl,
              onHashProgress: function (progressData) {
                console.log('校验中', JSON.stringify(progressData));
              },
              onProgress: function (progressData) {
                console.log('上传中', JSON.stringify(progressData));
              },
            }, (err, data) => {
              if (err) {
                rej(err)
              } else {
                res(data)
              }
            });
          })
        },
      }
    })
  </script>
</body>

</html>